﻿
@{
    ViewBag.Title = "Customers";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Customers</h2>

@Html.ActionLink("Create new user", "CustomerForm", "Customer")

    <table id="customers" class="table table-bordered table-hover">
        <thead>
            <tr>
                <td class="h4">First Name</td>
                <td class="h4">Last Name</td>
                <td class="h4">Membership typee</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>



@section scripts
{
    @Scripts.Render("~/bundles/dataTable")
    <script>
        $(document)
            .ready(function() {

                $("#customers")
                    .DataTable(
                    {
                        ajax: {
                            url: "/api/customers",
                            dataSrc: ""
                        },
                        columns: [
                            {
                                data: "FirstName"
                            },
                            {
                                data: "LastName"
                            },
                            {
                                data: "Membership.Name",                                
                            }
                        ]
                    });
            
        });
    </script>
}
